import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import router from '@/router'

// 可以使用自定义配置新建一个 axios 对象
const service = axios.create({
  // baseURL：请求后端接口的基地址
  // url = baseURL + request url
  // （拼接是有条件的。当外部的url是相对路径的时候才会拼接，
  // 如果外部的url是绝对路径（http(s)开头），则不会和baseURL进行拼接）
  // url = baseURL + request url 最终请求的地址是baseURL + api中传过来url
  // 如果baseURL 不是以http(s) 开头。 则请求的时候会自动带上 当前网站对应的地址
  baseURL: process.env.VUE_APP_BASE_API,
  // 设置的超时时间，超过5s钟 客户端就不在等待这次请求了。 默认超时
  timeout: 5000 // request timeout
})

// 请求拦截器
// 作用：接口请求的时候 在达到服务端之前 都会走一下请求拦截器
service.interceptors.request.use(function(config) {
  // 在发送请求之前做些什么
  const token = store.getters.token
  if (token) {
    config.headers.Authorization = `Bearer ${token}`// Bearer + token
  }
  return config
}, function(error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 响应拦截器
// 作用： 接口响应时 ，在达到客户端之前 都会走一下响应拦截器
service.interceptors.response.use(function(response) {
  // 对响应数据做点什么
  // 上边这个回调函数 当http状态码为2xx 调用
  const res = response.data
  if (!res.success) {
    // 对错误进行一个统一提示
    Message.error(res.message)
    return Promise.reject(new Error(res.message))
  }
  return res
}, function(error) {
  // console.dir(error)
  const { response: { status, data }} = error
  if (status === 401 && data.code === 10002) {
    // 清除vuex中信息
    store.commit('user/logOut')
    // 跳转登录页
    // router.push('/login')
    router.push({ path: '/login' })
  }
  // 对响应错误做点什么
  // 3xx-5xx 错误的时候调用
  // 对 响应状态码为3xx-5xx的时候 进行统一提示
  Message.error(error.message)
  return Promise.reject(error)
})
export default service
